<template>
  <el-dialog
    :modal="false"
    v-model:value:visible="visible"
    :width="$utils.toRem(320)"
    class="confirm-dialog"
  >
    <template v-slot:title>
      <div>{{ title || '提示' }}</div>
    </template>
    <div class="confirm-body">{{ text }}</div>
    <span class="dialog-footer">
      <el-button @click="confirmAndClose" class="confirm-btn" type="primary"
        >确认</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import * as Vue from 'vue'
const Confirm = {
  name: 'Confirm',
  props: ['visible', 'text', 'title', 'onConfirm'],
  methods: {
    confirmAndClose() {
      this.onConfirm && this.onConfirm()
      this.visible = false
    },
  },
}

export default Confirm

// 单例减少开销
let instanceCache = null
// 命令式调用
export const confirm = function (text, title, onConfirm = () => {}) {
  if (typeof title === 'function') {
    onConfirm = title
    title = undefined
  }

  const ConfirmCtor = Confirm
  const getInstance = () => {
    if (!instanceCache) {
      instanceCache = new ConfirmCtor({
        propsData: {
          text,
          title,
          onConfirm,
        },
      })
      // 生成dom
      instanceCache.$mount()
      document.body.appendChild(instanceCache.$el)
    } else {
      // 更新属性
      instanceCache.text = text
      instanceCache.title = title
      instanceCache.onConfirm = onConfirm
    }
    return instanceCache
  }
  const instance = getInstance()
  //  确保更新的prop渲染到dom
  // 确保动画效果
  Vue.nextTick(() => {
    instance.visible = true
  })
}
</script>

<style lang="scss" scoped>
.confirm-dialog {
  .confirm-body {
    line-height: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .confirm-btn {
    width: 100%;
  }
}
</style>
